<!-- 添加编辑资金方 -->
<template>
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="490px"
    @close="$emit('update:visible', false)"
    class="fund-add-dialog"
  >
    <el-form
      :model="form"
      :rules="rules"
      label-width="100px"
      label-position="left"
      ref="accounForm"
      size="small"
      width="300px;"
    >
      <el-form-item label="资金方：" prop="fundSideName">
        <el-input :disabled="editDisabled" v-model.trim="form.fundSideName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="授信额度：" prop="lineofCredit">
        <div class="flex-box">
          <el-input-number
            :min="10000"
            :max="999999999999.99"
            :step="10000"
            v-model="form.lineofCredit"
            class="flex-item"
          ></el-input-number>
          <div>元</div>
        </div>
      </el-form-item>
      <el-form-item label="利率：" prop="interestRate">
        <el-input
          :disabled="statusEditdisabled"
          v-model.trim="form.interestRate"
          autocomplete="off"
        >
          <template slot="append">%</template>
        </el-input>
      </el-form-item>

      <el-form-item label="合作周期：" prop="cooperation">
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :disabled="statusEditdisabled"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="可用周期：" prop="availableCycle">
        <el-input
          :disabled="statusEditdisabled"
          v-model.trim="form.availableCycle"
          type="number"
          autocomplete="off"
        >
          <template slot="append">天</template>
        </el-input>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="save('accounForm')">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script>
import api from "@/api/apiPath";
import utils from "@/common/utils";

export default {
  computed: {
    editDisabled() {
      return this.type === "edit";
    },
    statusEditdisabled() {
      return this.type === "edit" && this.form.state == 2;
    }
  },
  data() {
    return {
      form: {
        fundSideName: "",
        lineofCredit: "",
        interestRate: "",
        availableCycle: "",
        cooperationStarTime: "",
        cooperationEndTime: ""
      },
      title: "新增",
      show: false,
      time: [],
      maxAvailableCycle: 365,
      rules: {
        lineofCredit: [
          {
            required: true,
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              let used = this.form.dismantledFunds || 0;
              let res = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/;
              if (!value) {
                return callback(new Error("请输入授信额度"));
              }
              if (!res.test(value)) {
                return callback(new Error("只能为数字,保留两位小数点"));
              }

              if (value < 10000) {
                return callback(new Error("当前额度已经小于一万"));
              }
              if (value > 999999999999.99) {
                return callback(new Error("当前已经为最大额度"));
              }
              if (this.editDisabled && value < used) {
                //编辑状态判断是否小于已拆解资金
                return callback(new Error("授信额度不能小于已拆解资金"));
              }
              callback();
            }
          }
        ],
        interestRate: [
          {
            required: true,
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              let res = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/;
              if (!value && value !== 0) {
                return callback(new Error("请输入利率"));
              }
              if (!res.test(value)) {
                return callback(new Error("请输入最多保留两位小数的数字"));
              }
              callback();
            }
          }
        ],
        cooperation: [
          {
            required: true,
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              let { cooperationStarTime, cooperationEndTime } = this.form;
              if (!cooperationStarTime || !cooperationEndTime) {
                return callback(new Error("请输入合作周期"));
              }
              callback();
            }
          }
        ],
        availableCycle: [
          {
            required: true,

            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              let reg = /^[+]{0,1}(\d+)$/;
              if (!value) {
                return callback(new Error("请输入可用周期"));
              }
              value *= 1;
              if (value > 365) {
                return callback(new Error("最大为365天"));
              }
              if (!reg.test(value)) {
                return callback(new Error("只能为正整数"));
              }
              if (value > this.maxAvailableCycle) {
                return callback(new Error("已超过合作周期天数"));
              }
              callback();
            }
          }
        ],

        fundSideName: [
          {
            required: true,
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入资金方"));
              }
              if (value.length > 10) {
                return callback(new Error("最长十个字符"));
              }
              callback();
            }
          }
        ]
      }
    };
  },
  props: ["visible", "type", "editform"],
  watch: {
    visible(o, n) {
      if (o) {
        this.show = true;
        this.init();
      } else {
        this.show = false;
      }
    },
    time(value) {
      value = value ? value : [];
      let [cooperationStarTime = "", cooperationEndTime = ""] = value;
      this.form.cooperationStarTime = +new Date(
        utils.getTimeString(cooperationStarTime).slice(0, 10)
      );
      this.form.cooperationEndTime = +new Date(
        utils.getTimeString(cooperationEndTime).slice(0, 10)
      );
      //计算可用周期
      let timeDiff =
        this.form.cooperationEndTime - this.form.cooperationStarTime;
      //计算天数差
      let day = Math.floor(timeDiff / (24 * 60 * 60 * 1000));
      this.maxAvailableCycle = day;
      //this.form.availableCycle = day || "";
    }
  },
  methods: {
    init() {
      if (this.type == "edit") {
        this.title = "编辑";
        this.form = JSON.parse(JSON.stringify(this.editform));
        this.time = [
          this.form.cooperationStarTime,
          this.form.cooperationEndTime
        ];
      } else {
        this.title = "新增";
        this.time = [];
        if (this.$refs["accounForm"]) {
          this.$refs["accounForm"].resetFields();
        }
      }
    },
    save(formName) {
      let _this = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          _this.$emit(
            "onSave",
            this.type,
            JSON.parse(JSON.stringify(this.form))
          );
        } else {
          return false;
        }
      });
    }
  },

  created() {},
  destroyed() {},
  filters: {}
};
</script>

<style lang="stylus" scoped>
.flex-box {
  display: flex;
}

.flex-item {
  flex: 1;
}

.flex-box>* {
  margin-right: 10px;
}

.flex-box>*:last-child {
  margin-right: 0;
}
</style>
<style lang='stylus'>
.fund-add-dialog {
}
</style>
